import React from 'react'
import { Row, Col, Button, Form, Input, Select, Upload, message, Checkbox } from 'antd'
import './index.css'
import '@/common/skin.css'

const FormItem = Form.Item;
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;

const MessageSend = (props) => {
  const { getFieldDecorator } = props.form;
  const { 
    signType, 
    signData, 
    phoneSelectTypes,
    isSendButtonLoading, 
    fileName,
    fileData, 
    phones,
    importButtonLoading, 
    onChangePhones, 
    onChangePhoneSelectTypes,
    onChangeSign, 
    onChangeMessageContent, 
    onSend, 
    customUploadRequest 
  } = props

  const options = [ 
    { label: '移动' + (fileData.yiDong || 0), value: '1' },
    { label: '联通' + (fileData.lianTong || 0), value: '2' },
    { label: '电信' + (fileData.dianXin || 0), value: '3' },
  ];

  return (
    <Row style={{backgroundColor: '#fff', paddingTop: '24px'}}>
      <Form>
        <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 15 }} label="号码池" required>
          <Col span={4}>
            <Upload customRequest={customUploadRequest} showUploadList={false}>
              <Button loading={importButtonLoading} type="primary">导入文件</Button>
            </Upload>
          </Col>
          <Col span={4}>
            {fileName}
          </Col>
          <Col span={16}>
            <div className="statistics">
              总数 {fileData.count || 0}，
              <CheckboxGroup options={options} defaultValue={phoneSelectTypes} onChange={onChangePhoneSelectTypes} />
              未知 {fileData.unKnownCount || 0}
            </div>
          </Col>
          {/* {getFieldDecorator('phones', {
            rules: [{ required: true, message: '请输入号码池!', }],
          })(
            <Input.TextArea onChange={onChangePhones} className="skin-text-area" rows={3} />
          )}  */}
        </FormItem>
        <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 15 }} label="模板" >
          <Button 
            onClick={props.onTemplateDownload} 
            type="primary"
          >下载文件</Button>
        </FormItem>
        <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 15 }} label="签名" required>
          {getFieldDecorator('sign', {
            rules: [{
              required: true, message: '请输入签名!',
            }],
          })(
            <Select className="skin-select" style={{ width: 200 }} onChange={onChangeSign}>
              {signData.map(({ sign, id }, index) => <Option value={sign} key={index}>{sign}</Option>)}
            </Select>
          )}
          <Button className="sign-button" onClick={props.onSignFront} type={signType === 1 ? "primary" : "default"}>前置</Button>
          <Button className="sign-button" onClick={props.onSignBack} type={signType === 1 ? "default" : "primary"}>后置</Button>
        </FormItem>
        {/* <FormItem labelCol={{span: 3}} wrapperCol={{span: 15}} label="选择模板">
          <Button type="primary">选择模板</Button>
        </FormItem> */}
        <FormItem labelCol={{ span: 3 }} required wrapperCol={{ span: 15 }} label="短信内容">
          {getFieldDecorator('messageContent', {
            rules: [{ required: true, message: '请输入短信内容!', }]
          })(
            <Input.TextArea onChange={onChangeMessageContent} className="skin-text-area" placeholder="请输入短信内容"/>
          )}
        </FormItem>
        <FormItem>
          <Col offset={3}>
            <Button onClick={() => {
                if(!fileData.id){
                  message.error('请导入号码!')
                  return
                } 
                props.form.validateFields((error) => {
                  !error && onSend()
                })
              }
            }
            type="primary" 
            loading={isSendButtonLoading}
            style={{width: '100px'}}
          >发送</Button>
          </Col>
        </FormItem>
        <FormItem labelCol={{ span: 3 }} wrapperCol={{span: 15}} label="内容规范" style={{marginTop: 60}}>
          <div>
            * 必须带有【签名】，签名内容为：公司或品牌名称，字数要求2-16个字符，运营商规定必填。<br />
            * 签名只能选择审核过的签名,内容首尾不能添加【】<br />
            * 内容合法，不能发送房产、发票、移民等国家法律法规严格禁止的内容。<br />
            * 超链接地址请写在短信内容中，便于核实，部分安卓系统存在超链接识别问题，需在超链接前后添加空格。
          </div>
        </FormItem>
        <FormItem labelCol={{span: 3}} wrapperCol={{span: 15}} label="计费规则">
          <div>
            * 短信字数&lt;=70个字，按照70个字一条短信计算。中文英文符号统一计算为一个字符。<br />
            * 短信字数>70个字，占用3个字符作为分条字符，按照67个字记为一条短信计算，多条短信可能在部分手机系统上呈现为一条短信的形态，测试时请注意。
          </div>
        </FormItem>
        <FormItem labelCol={{span: 3}} wrapperCol={{span: 15}} label="审核规则">
          <div>
            * 签名跟模板报备的情况下，短信发送将直接提交给网关。<br />
            * 如果出现批量短信发送驳回的情况，可能为“敏感词拦截”进入人工审核，请联系客服。
          </div>
        </FormItem>
      </Form>
    </Row>
  )
}

export default Form.create({
  mapPropsToFields(props){
    return {
      phones:Form.createFormField({ value: props.phones }),
      sign:Form.createFormField({ value: props.sign }),
      messageContent:Form.createFormField({ value: props.messageContent }),
    }
  }
})(MessageSend);